<template>
  <div class="register-box">
    <div class="top">账号注册</div>
    <el-form
      :model="information"
      :rules="rules"
      label-position="left"
      label-width="80px"
      ref="registerForm"
    >
      <el-row>
        <el-form-item label="姓名" prop="username">
          <el-input
            v-model="information.username"
            type="text"
            name="username"
            required="required"
          ></el-input>
        </el-form-item>
        <div class="separator"></div>
        <el-form-item label="身份证号" prop="ID">
          <el-input
            v-model="information.ID"
            type="text"
            name="ID"
            required="required"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input
            v-model="information.phoneNumber"
            type="text"
            name="phoneNumber"
            required="required"
          ></el-input>
        </el-form-item>
        <div class="separator"></div>
        <el-form-item label="验证码" prop="verificationCode">
          <el-input
            v-model="information.verificationCode"
            type="text"
            name="verificationCode"
            required="required"
          >
            <template #append>
              <el-button @click="getCode">获取验证码</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="密码" prop="password1">
          <el-input
            v-model="information.password1"
            type="password"
            name="password1"
            required="required"
          ></el-input>
        </el-form-item>
        <div class="separator"></div>
        <el-form-item label="确认密码" prop="password2">
          <el-input
            v-model="information.password2"
            type="password"
            name="password2"
            required="required"
          ></el-input>
        </el-form-item>
      </el-row>
      <input type="button" value="立即注册" @click="submitForm" />
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from 'vue';
import { RegisterParams, UserService } from '@/utils/api/user';
import router from '@/router';
import { ElMessage } from 'element-plus';

export default defineComponent({
  setup() {
    const information: Ref<RegisterParams> = ref({
      username: '',
      ID: '',
      phoneNumber: '',
      verificationCode: '',
      password1: '',
      password2: '',
    });
    const getCode = () => {
      UserService.getCode({ phoneNumber: information.value.phoneNumber })
        .then((res) => {
          console.log(res.data);
          if (res.data.a == 11) {
            openError('验证码发送失败，请检查手机号！');
          } else if (res.data.a == 12) {
            ElMessage({
              showClose: true,
              message: '验证码发送成功',
              type: 'success',
              offset: 200,
            });
          } else {
            openError('获取验证码出错，请联系管理员！');
          }
        })
        .catch((error) => {
          console.log(error);
        });
    };
    //自定义表单验证
    const registerForm = ref(null);
    const submitForm = () => {
      let flag;
      (registerForm.value as any).validate((valid: boolean) => {
        flag = valid;
      });
      if (flag === true) {
        console.log(information.value);
        UserService.register(information.value)
          .then((res) => {
            console.log(res.data);
            if (res.data.a === 4) {
              alert('注册成功');
              router.push('login');
            } else if (res.data.a === 1) {
              openError('请先发送验证码！');
            } else if (res.data.a === 13) {
              openError('验证码输入错误！');
            } else if (res.data.a === 2) {
              openError('身份证号已注册！');
            } else if (res.data.a === 3) {
              openError('手机号号已注册！');
            } else {
              openError('注册失败，请联系管理员！');
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    };
    const checkUsername = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error('姓名不能为空'));
      }
      let r = /^[\u4E00-\u9FFF]{2,6}$/;
      if (!r.test(value)) {
        return callback(new Error('姓名应该为2到6个汉字'));
      }
      callback();
    };
    const checkID = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error('身份证号不能为空'));
      }
      let r = /^\d{18}$/;
      if (!r.test(value)) {
        return callback(new Error('身份证号应该为18位数字'));
      }
      callback();
    };
    const checkPhoneNumber = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      }
      let r = /^\d{11}$/;
      if (!r.test(value)) {
        return callback(new Error('手机号应该为11位数字'));
      }
      callback();
    };
    const checkVerificationCode = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error('验证码不能为空'));
      }
      callback();
    };
    const checkPassword1 = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error('密码不能为空'));
      }
      let r = /^\.{6,15}$/;
      if (!r.test(value)) {
        return callback(new Error('密码应该为6到15个字符'));
      }
      callback();
    };
    const checkPassword2 = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error('确认密码不能为空'));
      }
      if (
        information.value.password1 !== '' &&
        information.value.password1 !== value
      ) {
        return callback(new Error('两次密码不相同'));
      }
      callback();
    };
    const rules = {
      username: [{ validator: checkUsername, trigger: 'submit' }],
      ID: [{ validator: checkID, trigger: 'submit' }],
      phoneNumber: [{ validator: checkPhoneNumber, trigger: 'submit' }],
      verificationCode: [
        { validator: checkVerificationCode, trigger: 'submit' },
      ],
      password1: [{ validator: checkPassword1, trigger: 'submit' }],
      password2: [{ validator: checkPassword2, trigger: 'submit' }],
    };
    //错误提示
    const openError = (inf: string) => {
      ElMessage({
        showClose: true,
        message: inf,
        type: 'error',
        offset: 200,
      });
    };
    return {
      information,
      getCode,
      registerForm,
      submitForm,
      rules,
      openError,
    };
  },
});
</script>
<style lang="scss" scoped>
@import '@/assets/css/config.scss';
.register-box {
  width: 745px;
  padding: 50px 70px;
  background: white;
  border-radius: 10px;
  text-align: center;
}
div.top {
  font-size: 40px;
  letter-spacing: 20px;
  text-indent: 20px;
  margin-bottom: 50px;
  text-align: center;
}
div.separator {
  width: 80px;
  height: 10px;
}
.el-button {
  width: 98px;
  padding-left: 15px;
}
:deep(.el-input__inner) {
  letter-spacing: 1px;
}
:deep(.el-input__inner) {
  width: 250px;
}
:deep(.el-input__inner[name='verificationCode']) {
  width: 148px;
}
input[type='button'] {
  cursor: pointer;
  background: $themeRed;
  color: white;
  padding: 15px 0;
  letter-spacing: 8px;
  text-indent: 8px;
  width: 200px;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 18px;
  border: none;
  outline: none;
  border-radius: 6px;
}
</style>
